<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="首页" />
    <meta name="author" content="JinWYP" />

    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!--<link rel="icon" href="../../favicon.ico">-->

    <title>O&#39;Relly Generator</title>

    <!-- Bootstrap -->
    <link
      href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- <link href="/bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> -->

    <link href="./dist/main.min.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      html {
        font-size: 10px;
      }

      .ogbox .book_title_below {
        font-size: 6rem;
      }
    </style>
  </head>

  <body ng-app="websiteApp" ng-cloak>
    <div class="container-fluid ogbox" ng-controller="ogController as og">
      <div class="row">
        <div class="col-md-7">
          <div class="book_cover">
            <div class="book_head" ng-class="og.data.currentColor.style">
              <p class="subtitle_en" contenteditable="true">
                某熊的技术之路
              </p>
            </div>
            <div id="book_body">
              <p class="subtitle_ja_above" contenteditable="true"></p>
              <div
                class="book_title_cover "
                ng-class="og.data.currentColor.style"
              >
                <p class="book_title_above" contenteditable="true">
                  从入门到放弃
                </p>
                <p class="book_title_below" contenteditable="true">
                  JavaScript
                </p>
              </div>
              <p class="subtitle_ja_below" contenteditable="true">
                汇集前端各种搭环境教程,999种框架对比
              </p>
            </div>
            <div
              class="animal"
              dragbox
              left="60"
              top="20"
              limitleft="-70"
              limitright="230"
              maxwidth="320"
            >
              <img
                class="coverAnimal"
                ng-src="{{ og.data.currentAnimal.imageUrl }}"
                alt="{{ og.data.currentAnimal.name }}"
              />
            </div>
            <div class="book_foot">
              <div class="foot_left">
                <p id="logo_en" contenteditable="true">前端之路</p>
                <p id="logo_ja" contenteditable="true">Frontend Series</p>
              </div>
              <div class="foot_right">
                <p class="author" contenteditable="true">王下邀月熊 编著</p>
                <p
                  class="author"
                  style="font-size: 1.2rem"
                  contenteditable="true"
                >
                  github/wx-chevalier
                </p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-5">
          <div class="theme_box">
            <p id="ribbon_half" class="hidden"></p>
            <p class="box_title">Theme Picker</p>
            <ul>
              <li
                ng-repeat="color in og.data.colorList"
                ng-class="color.name"
                title="{{ color.name }}"
                ng-click="og.event.clickColor(color)"
              >
                {{ color.name }}
              </li>
            </ul>
          </div>

          <div class="animal_box">
            <p class="box_title">Animal Picker</p>
            <ul>
              <li
                ng-repeat="animal in og.data.animalList"
                ng-class="animal.style"
                title="{{ animal.name }}"
                ng-click="og.event.clickAnimal(animal)"
              >
                {{ animal.name }}
              </li>
            </ul>
          </div>

          <div class="button_box">
            <a
              href="javascript:void(0);"
              id="capture_button"
              class="icon_camera"
              ng-click="og.event.screenShot()"
              ><img src="./src/css/images/og/camera.png"
            /></a>
          </div>
        </div>
      </div>
    </div>

    <!--<script type="text/javascript" src="./bower_components/es6-promise-4.2.6/lib/es6-promise.js"></script>-->
    <!--<script type="text/javascript" src="./bower_components/es6-promise-4.2.6/lib/es6-promise.auto.js"></script>-->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!--<script type="text/javascript" src="./bower_components/html2canvas-0.4.1/build/html2canvas.js"></script>-->
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

    <script src="https://cdn.bootcss.com/angular.js/1.5.2/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/ngStorage/0.3.11/ngStorage.min.js"></script>

    <!-- <script type="text/javascript">
    document.write('<script src="' + (location.protocol || 'http:') + '//' + (location.hostname || 'localhost') + ':35729/livereload.js?snipver=1" type="text/javascript"><\/script>')
</script> -->

    <script type="text/javascript" src="./src/js/app.js"></script>
    <script
      type="text/javascript"
      src="./src/js/directive/dragbox.directive.js"
    ></script>
    <script
      type="text/javascript"
      src="./src/js/controller/og.controllers.js"
    ></script>
  </body>
</html>
